<template>
  <AppWrapper id="app-wallpaper">
    <div id="jay-app-wallpaper">
      <div class="preview">
        <img :src="backgroundImg" alt="bg-preview">
      </div>
      <div class="candidates">
        <div
          v-for="(item,index) in backgroundImgList"
          :key="index"
          class="candidates-item"
          :class="{'candidates-item-selected':backgroundImg === item}"
          @click="onSelect($event,item,index)"
        >
          <img :src="item" :alt="'bg'+index">
        </div>
      </div>
    </div>
  </AppWrapper>
</template>

<script>
  import AppWrapper from '../AppWrapper/index.vue'
  import {mapState, mapMutations} from 'vuex'
  export default {
    name: "app-wallpaper",
    components:{
      AppWrapper
    },
    data(){
      return{

      }
    },
    computed:{
      ...mapState('system',{
        backgroundImg: state => state.backgroundImg,
        backgroundImgList: state => state.backgroundImgList,
      })
    },
    methods:{
      onSelect(e,item,index){
        this.$store.commit('system/CHANGE_BACKGROUND_IMG',item)
      }
    }

  }
</script>

<style lang="scss" >

  #jay-app-wallpaper{
    width: 60vw;
    height: 80vh;
    min-width: 600px;
    min-height: 700px;
    background: rgba(51,51,51,1);
    overflow: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    &::-webkit-scrollbar {
      width: 6px;
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d3d7cf;
      border-radius: 5px;
    }
    &::-webkit-scrollbar-track {

      background-color: transparent;
    }
    .preview{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 43.33%;
      img{
        height: 80%;
      }
    }
    .candidates{
      flex: 1;
      /*background: aqua;*/
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      border-top: 1px solid #000000;
      &-item{
        width: 240px;
        height: 168px;
        margin: 16px;
        border: 4px solid transparent;
        &-selected{
          border: 4px solid rgba(180,83,9,1);
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>